/*行内元素与块级元素的转换

  ● display
块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;
      ○ display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
      ○ display:block;转换为块级元素。
      ○ display:inline;转换为行内元素。
      ○ display:inline-block;转换为行内块级元素。
以上四个是我常用的，事实上，还有很多
通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。
但是，有很多时候，我们需要使用display:inline-block；来转换行内元素，或者是块级元素。但是这个元素时css2新增的属性，对于IE7以下的版本不支持这个属性，所以需要一些兼容的办法。这里会即将写一篇

  ● float
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白

  ● position
当为行内元素进行定位时，position:absolute，与position:fixed。都会使原先的行内元素变为块级元素。
*/
.d1{
	height: 400px;
	background-color: goldenrod;
	position: absolute;
	top: 10px;
	width: 800px;
}

.d2{
	height: 150px;
	background-color: blueviolet;
    border: 1px solid green;
    width: 200px;
    position: relative;
    top: 10px;
}

.d3{
	height: 150px;
	background-color: blueviolet;
    border: 1px solid green;
    width: 200px;
    float: right;
}
